<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        订单详情
      </p>

      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
          >返回</el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->

    <!-- 合同信息 --start-->
    <div class="bigbox">
      <div class="conter_box1">
        <p>合同信息</p>
        <ul>
          <li>
            <span>订单编号</span>
            <el-input
              v-model="saleordno"
              style="width: 70%"
              disabled
            ></el-input>
          </li>
          <li>
            <span>合同批号</span>
            <el-input
              v-model="saleordno"
              style="width: 70%"
              disabled
            ></el-input>
          </li>
          <li>
            <span>订单类型</span>
            <el-input
              v-model="ordertype"
              style="width: 70%"
              disabled
            ></el-input>
          </li>
          <li>
            <span>合同类型</span>
            <el-input v-model="compony" style="width: 70%" disabled></el-input>
          </li>

          <li>
            <span>交货日期</span>
            <el-input
              v-model="deliverydate"
              style="width: 70%"
              disabled
            ></el-input>
          </li>
          <li>
            <span>签单人员</span>
            <el-input v-model="writer" style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>企业名称</span>
            <el-input v-model="getdate" style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>联系人员</span>
            <el-input v-model="getdate" style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input v-model="getdate" style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>签订日期</span>
            <el-input v-model="getdate" style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>人员职务</span>
            <el-input v-model="getdate" style="width: 70%" disabled></el-input>
          </li>
        </ul>
      </div>
      <!-- 合同信息 --end-->

      <div class="conter-bigbox1">
        <!--左边栏 --start-->
        <div class="conter-bigbox">
          <div class="conter_box3">
            <!-- 付款信息 -->
            <p>付款信息</p>
            <!-- input框 -->
            <template>
              <ul>
                <li>
                  <span>合同金额</span>
                  <el-input
                    v-model="saleordno"
                    disabled
                    style="width: 60%"
                  ></el-input>
                </li>
                <li>
                  <span>付款方式</span>
                  <el-input
                    v-model="saleordno"
                    disabled
                    style="width: 60%"
                  ></el-input>
                </li>
                <li>
                  <span>支付方式</span>
                  <el-input
                    v-model="saleordno"
                    disabled
                    style="width: 60%"
                  ></el-input>
                </li>
                <li>
                  <span>剩余金额</span>
                  <el-input
                    v-model="saleordno"
                    disabled
                    style="width: 60%"
                  ></el-input>
                </li>
              </ul>
            </template>
            <!-- from表单 -->
            <template>
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                class="from-fk"
              >
                <el-table-column prop="date" label="付款时间">
                </el-table-column>
                <el-table-column prop="name" label="付款金额">
                </el-table-column>
                <el-table-column prop="address" label="发票凭证">
                  <el-image
                    style="width: 40px; height: 40px"
                    :src="url"
                    :fit="fit"
                  ></el-image>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 底部盒子 -->
          <div class="conter_box2">
            <p>合同信息</p>
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :fit="fit"
            ></el-image>
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :fit="fit"
            ></el-image>
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :fit="fit"
            ></el-image>
          </div>
        </div>
        <!-- 右边盒子 -->
        <div class="conter-bigbox2">
          <div class="conter_box4">
            <p>产品信息</p>
            <template>
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                class="from-fk"
              >
                <el-table-column prop="date" label="产品类型">
                </el-table-column>
                <el-table-column prop="date" label="产品名称">
                </el-table-column>
                <el-table-column prop="date" label="产品规则">
                </el-table-column>
                <el-table-column prop="date" label="需求数量">
                </el-table-column>
                <el-table-column prop="date" label="已发数量">
                </el-table-column>
                <el-table-column prop="name" label="剩余数量">
                </el-table-column>
                <el-table-column prop="address" label="操作">
                  <el-button
                    size="medium"
                    type="text"
                    @click="dialogTableVisible = true"
                    >明细</el-button
                  >
                </el-table-column>
              </el-table>
              <el-dialog
                title="发货明细"
                :visible.sync="dialogTableVisible"
                :modal-append-to-body="false"
                width="340px"
              >
                <el-table :data="gridData">
                  <el-table-column
                    property="date"
                    label="发货时间"
                    width="150"
                  ></el-table-column>
                  <el-table-column
                    property="name"
                    label="发货数量"
                    width="150"
                  ></el-table-column>
                </el-table>
              </el-dialog>
            </template>
          </div>
          <div class="conter_box5">
            <p>返件信息</p>
            <template>
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                class="from-fk"
              >
                <el-table-column prop="date" label="产品类型">
                </el-table-column>
                <el-table-column prop="date" label="产品名称">
                </el-table-column>
                <el-table-column prop="date" label="产品规则">
                </el-table-column>
                <el-table-column prop="date" label="状态"> </el-table-column>
                <el-table-column prop="address" label="操作">
                  <el-button
                    size="medium"
                    type="text"
                    @click="dialogVisible = true"
                    >接受</el-button
                  >
                </el-table-column>
              </el-table>
              <el-dialog
                title="返件信息"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                :modal-append-to-body="false"
              >
                <ul>
                  <li>
                    <span>产品类型</span>
                    <el-input
                      v-model="input"
                      :disabled="true"
                      style="width: 70%"
                    >
                    </el-input>
                  </li>
                  <li>
                    <span>产品名称</span>
                    <el-input
                      placeholder="请输入内容"
                      v-model="input"
                      :disabled="true"
                      style="width: 70%"
                    >
                    </el-input>
                  </li>
                  <li>
                    <span>产品规格</span>
                    <el-input
                      placeholder="请输入内容"
                      v-model="input"
                      :disabled="true"
                      style="width: 70%"
                    >
                    </el-input>
                  </li>
                  <li>
                    <span>返件数量</span>
                    <el-input
                      placeholder="请输入内容"
                      v-model="input"
                      :disabled="true"
                      style="width: 70%"
                    >
                    </el-input>
                  </li>
                  <li>
                    <span>返件金额</span>
                    <el-input
                      placeholder="请输入内容"
                      v-model="input"
                      :disabled="true"
                      style="width: 70%"
                    >
                    </el-input>
                  </li>
                </ul>
                <ul>
                  <li>
                    <span>处理方式</span>

                    <el-input
                      placeholder="处理方案"
                      v-model="input"
                      style="width: 70%"
                    >
                    </el-input>
                  </li>
                </ul>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      value: [],

      dialogVisible: false,
      imageUrl: "",
      imageUrls: "",
      imageUrl1: "",
      imageUrls1: "",
      imageUrl2: "",
      imageUrls2: "",
      active: 0,
      state1: "",
      state2: "",
      dialogVisible: false,
      tableData: [{}],
      tableData1: [{}],
      tableData2: [{}],
      tableData3: [{}],
      dialogTableVisible: false,
      dialogVisible: false,
      //合同信息
      saleordno: "",
      ordertype: "",
      compony: "",
      getdate: "",
      deliverydate: "",
      writer: "",
      //客户信息

      //付款信息
      hemoney: "",
      paystyle: "",
      zhifustyle: "",
      //定金
      djfkdate: "",
      djfkratio: "",
      djfkmoney: "",
      //尾款
      wkfkdate: "",
      wkfkratio: "",
      wkfkmoney: "",
      daycount: "", //设置天数
      remark: "", //备注
      zhibiaoman: "",
      indexval: "", //零部件index
      ordtypevalue: [],
      procodevalue: [],
      fukuanstylevalue: [
        //   { key: 1, value: "全款" },
        //   { key: 2, value: "分期" },
        //   { key: 3, value: "特殊" },
        //   { key: 4, value: "月结" },
        // ],
        // daysvalue: [
        //   { key: 1, value: "30" },
        //   { key: 2, value: "60" },
        //   { key: 3, value: "90" },
        //   { key: 4, value: "120" },
        // ],
        // options: [
        //   {
        //     value: "现金",
        //     label: "现金",
        //   },
        //   {
        //     value: "承兑汇票",
        //     label: "承兑汇票",
        //     children: [
        //       {
        //         value: "电子",
        //         label: "电子",
        //       },
        //       {
        //         value: "纸质",
        //         label: "纸质",
        //       },
        //     ],
        //   },
      ],
      fq: false,
      bz: false,
      yj: false,
      e: "",
    };
  },
  created() {
    this.e = this.$route.query.e;
    this.saleordno = this.$route.query.saleordno;
    this.getxq();
  },
  methods: {
    //付款方式事件
    // fkfs(e) {
    //   this.djfkdate = "";
    //   this.djfkratio = "";
    //   this.djfkmoney = "";
    //   this.wkfkdate = "";
    //   this.wkfkratio = "";
    //   this.wkfkmoney = "";
    //   this.daycount = "";
    //   this.remark = "";
    //   console.log(e);
    //   if (e == "分期") {
    //     this.fq = true;
    //     this.bz = false;
    //     this.yj = false;
    //   } else if (e == "全款") {
    //     this.fq = false;
    //     this.bz = false;
    //     this.yj = false;
    //   } else if (e == "特殊") {
    //     this.bz = true;
    //     this.fq = false;
    //     this.yj = false;
    //   } else if (e == "月结") {
    //     this.yj = true;
    //     this.bz = false;
    //     this.fq = false;
    //   }
    // },
    //支付方式事件
    handleChange(value) {
      console.log(value);
    },
    //详情数据
    // getxq() {
    //   let arr = { saleordno: this.saleordno };
    //   let arr1 = JSON.stringify(arr);
    //   axios(
    //     "apis/SalesManagement.asmx/OrderManagelst?index=2&jsondata=" + arr1
    //   ).then(({ data }) => {
    //     let data1 = this.$x2js.xml2js(data);
    //     let data3 = JSON.parse(data1.string.__text);
    //     console.log(data3);
    //     this.ordertype = data3.ordertype;
    //     this.compony = data3.compony;
    //     this.zhibiaoman = data3.maker;

    //     for (var i = 0; i < 1; i++) {
    //       var dd = new Date(parseInt(data3.getdate.substr(6, 13)));
    //       var y = dd.getFullYear();
    //       var m = dd.getMonth() + 1;
    //       m = m < 10 ? "0" + m : m;
    //       var d = dd.getDate();
    //       d = d < 10 ? "0" + d : d;
    //       this.getdate = y + "-" + m + "-" + d + " ";
    //     }
    //     for (var i = 0; i < 1; i++) {
    //       var dd = new Date(parseInt(data3.deliverydate.substr(6, 13)));
    //       var y = dd.getFullYear();
    //       var m = dd.getMonth() + 1;
    //       m = m < 10 ? "0" + m : m;
    //       var d = dd.getDate();
    //       d = d < 10 ? "0" + d : d;
    //       this.deliverydate = y + "-" + m + "-" + d + " ";
    //     }
    //     this.writer = data3.writer;
    //     var val = [];
    //     data3.lstmon.forEach((item) => {
    //       val.push(item);
    //     });
    //     console.log(val);
    //     this.hemoney = val[0].hemoney;
    //     this.paystyle = val[0].paystyle;
    //     this.fkfs(this.paystyle);
    //     this.zhifustyle = val[0].zhifustyle;
    //     if (this.paystyle == "分期") {
    //       for (var i = 0; i < 1; i++) {
    //         var dd = new Date(parseInt(val[i].djfkdate.substr(6, 13)));
    //         var y = dd.getFullYear();
    //         var m = dd.getMonth() + 1;
    //         m = m < 10 ? "0" + m : m;
    //         var d = dd.getDate();
    //         d = d < 10 ? "0" + d : d;
    //         this.djfkdate = y + "-" + m + "-" + d + " ";
    //       }
    //       this.djfkratio = val[0].djfkratio;
    //       this.djfkmoney = val[0].djfkmoney;
    //       for (var i = 0; i < 1; i++) {
    //         var dd = new Date(parseInt(val[i].wkfkdate.substr(6, 13)));
    //         var y = dd.getFullYear();
    //         var m = dd.getMonth() + 1;
    //         m = m < 10 ? "0" + m : m;
    //         var d = dd.getDate();
    //         d = d < 10 ? "0" + d : d;
    //         this.wkfkdate = y + "-" + m + "-" + d + " ";
    //       }
    //       this.wkfkratio = val[0].wkfkratio;
    //       this.wkfkmoney = val[0].wkfkmoney;
    //     } else if (this.paystyle == "特殊") {
    //       this.remark = val[0].remark;
    //     }
    //     var val1 = [];
    //     data3.lstcp.forEach((item) => {
    //       val1.push(item);
    //     });
    //     this.tableData = val1;
    //     for (var i = 0; i < this.tableData.length; i++) {
    //       var dd = new Date(parseInt(this.tableData[i].delivery.substr(6, 13)));
    //       var y = dd.getFullYear();
    //       var m = dd.getMonth() + 1;
    //       m = m < 10 ? "0" + m : m;
    //       var d = dd.getDate();
    //       d = d < 10 ? "0" + d : d;
    //       this.tableData[i].deliverydate = y + "-" + m + "-" + d + " ";
    //     }
    //     var pic = [];
    //     data3.lstpic.forEach((item) => {
    //       pic.push(item);
    //     });
    //     let picc = pic.length;
    //     if (picc == 3) {
    //       this.imageUrls = pic[0].photo2;
    //       this.imageUrls1 = pic[1].photo2;
    //       this.imageUrls2 = pic[2].photo2;
    //     } else if (picc == 2) {
    //       this.imageUrls = pic[0].photo2;
    //       this.imageUrls1 = pic[1].photo2;
    //     }
    //   });
    // },
    //审核
    // shenhe() {
    //   axios("apis/SalesManagement.asmx/SaleXl?index=2").then(({ data }) => {
    //     let data1 = this.$x2js.xml2js(data);
    //     let data3 = JSON.parse(data1.string.__text);
    //     console.log(data3);
    //     this.procodevalue = data3;
    //   });
    // },

    // pz(e) {
    //   let arr = { id: 1, orderno: this.saleordno, Id: e };
    //   let arr1 = JSON.stringify(arr);
    //   axios(
    //     "apis/SalesManagement.asmx/OrderManagelst?index=6&jsondata=" + arr1
    //   ).then(({ data }) => {
    //     let data1 = this.$x2js.xml2js(data);
    //     let data3 = JSON.parse(data1.string.__text);
    //     console.log(data3);
    //     this.tableData1 = data3;
    //     this.dialogVisible = true;
    //   });
    // },
    //零部件保存
    // baocun() {
    //   this.dialogVisible = false;
    // },
    //返回
    revert() {
      this.$router.go(-1);
    },
    // //定金时间转换
    // djfkdatefn() {
    //   this.djfkdate =
    //     this.djfkdate.getFullYear() +
    //     "-" +
    //     (this.djfkdate.getMonth() + 1) +
    //     "-" +
    //     this.djfkdate.getDate() +
    //     " ";
    // },
    // //尾款时间转换
    // wkfkdatefn() {
    //   this.wkfkdate =
    //     this.wkfkdate.getFullYear() +
    //     "-" +
    //     (this.wkfkdate.getMonth() + 1) +
    //     "-" +
    //     this.wkfkdate.getDate() +
    //     " ";
    // },
    //新增订单信息
    add4() {
      let arr = {};
      this.tableData.push(arr);
    },
    // //新增零部件
    // addlbj() {
    //   let arr = {};
    //   this.tableData1.push(arr);
    // },
    // handleClose() {
    //   this.dialogVisible = false;
    // },
    // handleAvatarSuccess(res, file) {
    //   var datas = this.$x2js.xml2js(res);
    //   this.imageUrl = datas.UpFileReturn.url;
    //   this.imageUrls = datas.UpFileReturn.fullurl;
    //   console.log(this.imageUrl);
    // },
    // handleAvatarSuccess1(res, file) {
    //   var datas = this.$x2js.xml2js(res);
    //   this.imageUrl1 = datas.UpFileReturn.url;
    //   this.imageUrls1 = datas.UpFileReturn.fullurl;
    //   console.log(this.imageUrl1);
    // },
    // handleAvatarSuccess2(res, file) {
    //   var datas = this.$x2js.xml2js(res);
    //   this.imageUrl2 = datas.UpFileReturn.url;
    //   this.imageUrls2 = datas.UpFileReturn.fullurl;
    //   console.log(this.imageUrl2);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.bigbox {
  width: 98%;
  margin-left: 17px;
}
.ryuan {
  width: 20%;
  margin-top: 10px;
  padding-left: 1%;
  p {
    height: 40px;
  }
}
.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;
  font-size: 20px;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 5px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.step {
  width: 50%;
  position: absolute;
  top: 0;
  left: 25%;
}
.conter_box1 {
  background: $white;
  height: 280px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    padding-top: 20px;
    height: 40px;
    // margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
    }
  }
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
.conter-bigbox {
  width: 30%;
  display: inline-block;
}
.conter-bigbox1 {
  display: flex;
  justify-content: space-between;
}
.conter_box2 {
  background: $white;
  height: 200px;
  // width: 30%;
  margin-top: 20px;
  // margin: 0;
  padding: 5px 1% 0 1%;
  // display: inline-block;

  p {
    height: 40px;
    margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  .el-image {
    padding-left: 20px;
    margin-top: 10px;
  }
}
.conter_box3 {
  background: $white;
  height: 350px;
  // width: 30%;
  margin-top: 20px;
  padding: 5px 1% 0 1%;
  // display: inline-block;

  p {
    height: 40px;
    margin-top: 10px;
    // margin-top: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 10px;

    li {
      width: 50%;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
  .from-fk {
    font-size: 16px;
  }
  /deep/ .cell {
    font-size: 14px !important;
    color: #999999;
    text-align: center;
    padding: 0;
  }
  /deep/ .el-table th {
    background-color: #fff;
  }
}
.conter-bigbox2 {
  width: 68%;
  display: inline-block;
  // height: 1000px;
}
.conter_box4 {
  background: $white;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  margin-top: 20px;
  p {
    height: 40px;
    margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  /deep/ .cell {
    font-size: 14px !important;
    color: #999999;
    text-align: center;
    padding: 0;
    button {
      border: 0;
      background-color: #fff;
    }
  }
  /deep/ .el-table th {
    background-color: #fff;
  }
}
.conter_box5 {
  background: $white;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  /deep/ .cell {
    font-size: 14px !important;
    color: #999999;
    text-align: center;
    padding: 0;
    button {
      border: 0;
      background-color: #fff;
    }
  }
  /deep/ .el-table th {
    background-color: #fff;
  }
}
// .dispose_box1 {
//   border: solid 1px #ccc;
// }
// .dispose_box2,
// .dispose_box3 {
//   border: solid 1px #ccc;
//   margin-top: 10px;
// }
.el-dialog {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 10px;
    margin-left: 15px;
    li {
      width: 30%;
      font-size: 14px;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-top: 20px;
    }
  }
}
.bottom {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  p {
    width: 20%;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style>
/* .el-dialog__footer {
  text-align: center;
}

.el-input__inner {
  font-size: 12px;
}
#conter_box5 .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#conter_box5 .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#conter_box5 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
#conter_box5 .avatar {
  width: 80px;
  height: 80px;
  display: block;
} */
</style>